<template>
    <div>
        <div class="box" v-for="(item,index) in indexlist" :key="index.id">
            <div class="title" >
                <img src="https://static.zhipin.com/zhipin-geek/v172/h5/wap/images/technology.png" alt />
                <div class="sub-name" >
                    <h4 >{{item.name}}</h4>
                </div>
            </div>
            <div class="position" >
                <a href="#" v-for="(i,cindex) in indexlist[index].menus" :key="cindex.id" @click="goPosition(i.name)">{{i.name}}</a>
            </div>
        </div>
    </div>
</template>
<script>
import {getIndexList} from '../../../src/api/index'
import {mapState,mapGetters,mapMutations } from 'vuex';
import '../../assets/style/common.scss'
export default {
    data:function(){ 
        return{
            indexlist:[],
            menus:[],
        }
    },
    async created(){
        let rs = await getIndexList();
        this.indexlist = rs.data;
        this.menus = rs.data.menus;
        console.log(rs)
    },
    methods:{
        goPosition(i){
            this.$store.commit('SET_SEARCHLIST',i);
            // console.log(i)
            this.$router.push({
                path:"/position",
            })
        }
        
    },
    
};
</script>
<style lang="scss" scoped>
.box{

    margin: 0 15px;
    padding-top: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f8f9;
    .title{
        margin-bottom : 18px;
        color: #404855;
        font-size: 13px;
        overflow: hidden;
        img {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            vertical-align: middle;
            float: left;
        }
        .sub-name {
            margin: 0 48px 0 65px;
            h4 {
                font-size: 15px;
                margin-top: 14px;
            }
        }
    }
    .position{
        color: #525252;
        font-size: 18px;
        a {
            padding: 8px 16px;
            font-size: 13px;
            color: #7e8793;
            line-height: 13px;
            background: #f5f8f9;
            border-radius: 100px;
            margin: 0 8px 8px 0;
            display: inline-block;
        }
    }
}
</style>